<template>
  <draggable
    v-model="codeList"
    :options="{animation:200}"
    @update="datadragEnd"
    @start="draggableStart"
    @end="draggableStop"
  >
    <div v-for="(item, index) in codeList" :key="index" class="right-content-list-item" :data-id="item.id">
      <div class="list-item-num">0{{ ++index }}</div>
      <div class="list-item-title">
        <span>06:00~11:00 生鲜之家-未分配</span>
        <span>10101010010101</span>
      </div>
      <div>
        地址：金水区XXXXXXXXXXXXX
      </div>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [{}],
      queryData: {},
      codeList: [
        {
          id: 1,
          visible: false
        },
        {
          id: 2,
          visible: false
        },
        {
          id: 3,
          visible: false
        },
        {
          id: 4,
          visible: false
        }
      ]
    }
  },

  methods: {
    /**
     * 拖动排序完成后执行
     */
    datadragEnd(evt) {
      console.log('evt', evt)
    },

    // 拖动列表开始
    draggableStart(evt) {
      this.queryData.infoId = evt.item.getAttribute('data-id')
    },

    // 拖动列表结束
    draggableStop(evt) {
      // 获取当前鼠标上的元素
      const list = document.getElementsByClassName('map-component-line-item ')
      const rangeList = []
      const clientX = evt.originalEvent.clientX
      const clientY = evt.originalEvent.clientY

      list.forEach((item) => {
        let leftStart = 0
        let leftEnd = 0
        let topStart = 0
        let topEnd = 0
        leftStart = item.getBoundingClientRect().x
        leftEnd = item.getBoundingClientRect().x + item.getBoundingClientRect().width

        topStart = item.getBoundingClientRect().y
        topEnd = item.getBoundingClientRect().y + item.getBoundingClientRect().height

        const obj = {
          leftStart,
          leftEnd,
          topStart,
          topEnd
        }
        rangeList.push(obj)
      })

      rangeList.forEach((item, index) => {
        if (clientX > item.leftStart && clientX < item.leftEnd && clientY > item.topStart && clientY < item.topEnd) {
          // console.log(list[index].getAttribute('data-id'));
          this.queryData.classId = list[index].getAttribute('data-id')
          alert(JSON.stringify(this.queryData))
        }
      })
    }
  }
}
</script>
